<template>
  <div class='songList-table'>
    <div class='songList-container'>
      <div class='handle-box'>
        <el-form :inline='true' :model='searchParams' @keyup.enter.native='getSongListByPage()'>
          <el-form-item>
            <el-input v-model='searchParams.name' placeholder='参数名' clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click='getSongListByPage()'>查询</el-button>
            <!--<el-button v-if='isAuth('product:brand:save')' type='primary' @click='singerAddDialogVisible=true'>新增</el-button>-->
            <!--<el-button v-if='isAuth('product:brand:delete')' type='danger' @click='deleteHandle()' :disabled='dataListSelections.length <= 0'>批量删除</el-button>-->
            <el-button  type='primary' @click='addOrUpdateHandler()'>新增</el-button>
            <el-button  type='danger' @click='deleteHandle()' :disabled='dataListSelections.length <= 0'>批量删除</el-button>
          </el-form-item>
        </el-form>
        <el-table size='mini'
                  :border='true'
                  :data='songListList'
                  @selection-change='selectionChangeHandle'>
          <el-table-column label='歌单封面'  align='center'>
            <template slot-scope='scope'>
              <div class='songList-img'>
                <img :src='scope.row.pic'>
              </div>
            </template>
          </el-table-column>
          <el-table-column label='歌单名称' align='center'>
            <template slot-scope='scope'>
              {{scope.row.title}}
            </template>
          </el-table-column>
          <el-table-column label='歌单介绍' align='center'>
            <template slot-scope='scope'>
              {{scope.row.introduction}}
            </template>
          </el-table-column>
          <el-table-column label='歌单风格' align='center'>
            <template slot-scope='scope'>
              {{scope.row.style}}
            </template>
          </el-table-column>
          <el-table-column
            fixed='right'
            header-align='center'
            align='center'
            width='150'
            label='歌曲管理'>
            <template slot-scope='scope'>
              <el-button type='text' size='small' @click='songUpdateHandler(scope.row.id, scope.row.title)'>歌曲管理</el-button>
            </template>
          </el-table-column>
          <el-table-column
            fixed='right'
            header-align='center'
            align='center'
            width='150'
            label='操作'>
            <template slot-scope='scope'>
              <el-button type='text' size='small' @click='addOrUpdateHandler(scope.row.id)'>修改</el-button>
              <el-button type='text' size='small' @click='deleteHandle()'>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change='sizeChangeHandle'
          @current-change='currentChangeHandle'
          :current-page='pageIndex'
          :page-sizes='[10, 20, 50, 100]'
          :page-size='pageSize'
          :total='totalPage'
          layout='total, sizes, prev, pager, next, jumper'>
        </el-pagination>
        <add-or-update v-if='songListAddOrUpdateVisible' ref='addOrUpdate' @refreshDataList='getSongListByPage'></add-or-update>
        <song-update v-if='songUpdateVisible' ref='songUpdate'></song-update>
      </div>
    </div>
  </div>
</template>

<script>
import AddOrUpdate from './songList-add-or-update'
import songUpdate from './song-update'
import Song from '../Song/song'
export default {
  name: 'songList',
  components: {
    Song,
    AddOrUpdate,
    songUpdate
  },
  data () {
    return {
      songListAddOrUpdateVisible: false,
      songUpdateVisible: false,
      searchParams: {
        name: ''
      },
      songListList: [],
      dataListSelections: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0
    }
  },
  computed: {
  },
  created () {
    this.getSongListByPage()
  },
  methods: {
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandler (id) {
      this.songListAddOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    songUpdateHandler (id, title) {
      // this.songUpdateVisible = true
      this.$router.push({path: '/songListDetail', query: {songListId: id, songListTitle: title}})
    },
    // 删除
    deleteHandle (id) {
      let ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.addSinger({
          data: ids
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getSongListByPage()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getSongListByPage()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getSongListByPage()
    },
    getSongListByPage () {
      let that = this
      that.songListList = []
      let request = {
        params: {
          page: that.pageIndex,
          limit: that.pageSize,
          name: that.searchParams.name
        }
      }
      console.log(88888)
      that.$api.getSongListByPage(request).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          that.songListList = res.data.data.list
          this.totalPage = res.data.data.totalCount
          that.singerAddDialogVisible = false
        } else {
          console.log(res.data)
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
  .songList-table{
    margin: auto;
    width: 80%;
  }
  .handle-box{
    margin-top: 10px;
    display: block;
  }
  .songList-img img{
    width: 140px;
    height: 140px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
  }
  body .el-table th.gutter{
    display: table-cell!important;
  }

</style>
